// 属性配置面板 PropertyPanel.js
export default {
    name: "PropertyPanel",
    dependencies: ['./imgpicker.js', './muimgpicker.js'], // 依赖声明
    props: {
        templateConfig: Object,
        activeComponent: Object,
        activeIndex: Number,
        canvasComponents: Array
    },
    emits: ['update:templateConfig', 'move-component', 'add-menu-item', 'remove-menu-item'],
    setup(props, { emit }) {
        const moveComponent = (direction) => {
            const newIndex = direction === 'up' ? props.activeIndex - 1 : props.activeIndex + 1;
            emit('move-component', props.activeIndex, newIndex);
        };
        
        const getPlaceholder = (type) => {
            const map = {
                navigate: '非TabBar页面（如 /pages/user/login）',
                redirect: '非TabBar页面（如 /pages/user/login）',
                switchTab: 'TabBar页面路径（如 /pages/index/index）',
                reLaunch: '通用页面路径（将关闭所有页面）',
                webview: '完整H5地址（需配置业务域名）'
            }
            return map[type] || '请输入跳转地址';
        }
        
        return {
            moveComponent,
            getPlaceholder
        };
    },
    template: `
    <div class="property-panel" style="width:38%;">
        <el-card style="background-color: #f9f9f9;">
            <div class="title">全局配置</div>
            <div class="global-properties">
                <div class="config-item">
                    <label>模板名称</label>
                    <el-input v-model="templateConfig.name" @change="$emit('update:templateConfig', templateConfig)"/>
                </div>
                <el-row>
                    <el-col :span="8">
                        <div class="config-item">
                            <label>背景颜色</label>
                            <el-color-picker v-model="templateConfig.backgroundColor" @change="$emit('update:templateConfig', templateConfig)"/>
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <div class="config-item">
                            <label>页面边距(px)</label>
                            <el-input-number v-model="templateConfig.pagePadding" :min="0" :max="100" @change="$emit('update:templateConfig', templateConfig)"/>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="config-item">
                            <label>是否启用</label>
                            <el-switch v-model="templateConfig.is_enabled" @change="$emit('update:templateConfig', templateConfig)"/>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-card>
        <el-card style="background-color: #f9f9f9; margin-top:30px;">
            <div class="title">属性设置</div>
            <template v-if="activeIndex !== -1">
                <div class="order-control">
                    <el-button :disabled="activeIndex === 0" @click="moveComponent('up')">
                        <el-icon><Top /></el-icon>上移
                    </el-button>
                    <el-button :disabled="activeIndex === canvasComponents.length - 1" @click="moveComponent('down')">
                        <el-icon><Bottom /></el-icon>下移
                    </el-button>
                </div>
                <div class="component-properties">
                    <!-- 轮播图配置 -->
                    <template v-if="activeComponent.type === 'carousel'">
                        <div class="config-item">
                            <label>图片(至少2张)</label>
                            <muimgpicker v-model="activeComponent.config.items" />
                        </div>
                    </template>
    
                    <!-- 公告配置 -->
                    <template v-if="activeComponent.type === 'notice'">
                        <div class="config-item">
                            <label>公告内容</label>
                            <el-input type="textarea" v-model="activeComponent.config.text"/>
                        </div>
                        <el-row>
                            <el-col :span="8">
                                <div class="config-item">
                                    <label>滚动速度</label>
                                    <el-input-number v-model="activeComponent.config.speed" :min="50" :max="200"/>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="config-item">
                                    <label>字体颜色</label>
                                    <el-color-picker v-model="activeComponent.config.color"/>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="config-item">
                                    <label>背景颜色</label>
                                    <el-color-picker v-model="activeComponent.config.bgColor"/>
                                </div>
                            </el-col>
                        </el-row>
                    </template>
                    
                    <!-- 视频配置 -->
                    <template v-if="activeComponent.type === 'video'">
                        <div class="config-item">
                            <label>视频地址</label>
                            <el-input type="textarea" v-model="activeComponent.config.videoUrl"/>
                        </div>
                    </template> 
    
                    <!-- 网格菜单配置 -->
                    <template v-if="activeComponent.type === 'menu-grid'">
                        <el-row>
                            <el-col :span="8">
                                <div class="config-item">
                                    <label>列数</label>
                                    <el-input-number v-model="activeComponent.config.columns" :min="1" :max="6" size="small"/>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="config-item">
                                    <label>行间距(px)</label>
                                    <el-input-number v-model="activeComponent.config.rowGap" :min="0" :max="100" size="small"/>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="config-item">
                                    <label>列间距(px)</label>
                                    <el-input-number v-model="activeComponent.config.colGap" :min="0" :max="100" size="small"/>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="config-item">
                                    <label>图片大小(px)</label>
                                    <el-input-number v-model="activeComponent.config.iconSize" :min="1" :max="1000" size="small"/>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="config-item">
                                    <label>文字大小(px)</label>
                                    <el-input-number v-model="activeComponent.config.txtSize" :min="1" :max="60" size="small"/>
                                </div>
                            </el-col>
                        </el-row>
                        <div class="config-item">
                            <label>菜单项管理</label>
                            <div class="menu-management">
                                <el-button type="primary" size="small" @click="$emit('add-menu-item')":disabled="activeComponent.config.items.length >= 20">
                                    <el-icon><Plus /></el-icon>添加菜单项
                                </el-button>
                    
                                <draggable v-model="activeComponent.config.items" handle=".drag-handle" item-key="id" class="menu-items-list">
                                    <template #item="{ element, index }">
                                        <div class="menu-item">
                                            <el-icon class="drag-handle"><Rank /></el-icon>
                                            <el-input v-model="element.name" placeholder="菜单名称" size="small" style="width: 150px; margin: 0 8px;"/>
                                            <el-select v-model="element.type" placeholder="跳转类型"size="small" style="width: 120px; margin: 0 8px;">
                                                <el-option label="navigate" value="navigate" />
                                                <el-option label="redirect" value="redirect" />
                                                <el-option label="switchTab" value="switchTab" />
                                                <el-option label="reLaunch" value="reLaunch" />
                                                <el-option label="外部链接" value="webview" />
                                            </el-select>
                                            <imgpicker v-model="element.image" size="small" />
                                            <el-input v-model="element.link" :placeholder="getPlaceholder(element.type)" size="small" style="width: 230px; margin: 0 8px;"/>
                                            <el-button type="danger" size="small" @click="$emit('remove-menu-item', index)" icon="Delete" circle />
                                        </div>
                                    </template>
                                </draggable>
                            </div>
                        </div>
                    </template>
                    
                    <!-- win8瓷贴菜单 -->
                    <template v-if="activeComponent.type === 'custom-grid'">
                        <div class="property-section">
                            <h3 style="color: #333; font-size: 16px; margin-bottom: 20px;">瓷贴菜单配置</h3>
                            
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <div class="config-item">
                                        <label>列数</label>
                                        <el-input-number v-model="activeComponent.config.columns" :min="1" :max="4" size="small" style="width: 100%;"/>
                                    </div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="config-item">
                                        <label>行高(px)</label>
                                        <el-input-number v-model="activeComponent.config.rowHeight" :min="50" :max="300" size="small" style="width: 100%;"/>
                                    </div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="config-item">
                                        <label>间距(px)</label>
                                        <el-input-number v-model="activeComponent.config.gap" :min="0" :max="20" size="small" style="width: 100%;"/>
                                    </div>
                                </el-col>
                            </el-row>
                    
                            <div class="config-item" style="margin-top: 20px;">
                                <label style="display: block; margin-bottom: 12px; color: #606266;">瓷贴项管理</label>
                                <div style="border: 1px solid #ebeef5; border-radius: 4px; padding: 12px;">
                                    <el-button type="primary" size="small" @click="activeComponent.config.items.push({ rowSpan: 1 })":disabled="activeComponent.config.items.length >= 12">
                                        <el-icon><Plus /></el-icon>添加瓷贴项
                                    </el-button>
                                    <draggable v-model="activeComponent.config.items" handle=".drag-handle" item-key="id">
                                        <template #item="{ element, index }">
                                            <div style="display: flex;align-items: center;padding: 8px;margin: 8px 0;background: #f8f9fa;border-radius: 4px;border: 1px solid #ebeef5;">
                                                <el-icon class="drag-handle" style="cursor: move; color: #909399; margin-right: 8px;"><Rank /></el-icon>
                                                <imgpicker v-model="element.image" size="small" />
                                                <el-select v-model="element.type" placeholder="跳转类型"size="small" style="width: 120px; margin: 0 8px;">
                                                    <el-option label="navigate" value="navigate" />
                                                    <el-option label="redirect" value="redirect" />
                                                    <el-option label="switchTab" value="switchTab" />
                                                    <el-option label="reLaunch" value="reLaunch" />
                                                    <el-option label="外部链接" value="webview" />
                                                </el-select>
                                                <el-input v-model="element.link" :placeholder="getPlaceholder(element.type)" size="small" style="width: 230px; margin: 0 8px;"/>
                                                <el-select v-model="element.rowSpan" placeholder="占据行数" size="small" style="width: 100px; margin: 0 4px;">
                                                    <el-option :value="1" label="1行" />
                                                    <el-option :value="2" label="2行" />
                                                </el-select>
                                                <el-button type="danger" size="small" @click="activeComponent.config.items.splice(index, 1)" icon="Delete" circle style="margin-left: 4px;"/>
                                            </div>
                                        </template>
                                    </draggable>
                                </div>
                            </div>
                        </div>
                    </template>
    
                    <!-- 搜索框配置 -->
                    <template v-if="activeComponent.type === 'search'">
                        <div class="config-item">
                            <label>圆角尺寸</label>
                            <el-input-number v-model="activeComponent.config.radius" :min="0" :max="50"/>
                        </div>
                    </template>
                    
                    <!-- 文章列表配置 -->
                    <template v-if="activeComponent.type === 'article-list'">
                        <el-row>
                            <el-col :span="8">
                                <div class="config-item">
                                    <label>标题颜色</label>
                                    <el-color-picker v-model="activeComponent.config.titleColor"/>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="config-item">
                                    <label>日期颜色</label>
                                    <el-color-picker v-model="activeComponent.config.dateColor"/>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="config-item">
                                    <label>显示篇数</label>
                                    <el-input-number v-model="activeComponent.config.num" :min="1" :max="10" size="small"/>
                                </div>
                            </el-col>
                        </el-row>
                    </template>
                    
                    <!-- 查询列表配置 -->                    
                    <template v-if="activeComponent.type === 'query-list'">
                        <el-row>
                            <el-col :span="8">
                                <div class="config-item">
                                    <label>标题颜色</label>
                                    <el-color-picker v-model="activeComponent.config.titleColor"/>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="config-item">
                                    <label>日期颜色</label>
                                    <el-color-picker v-model="activeComponent.config.dateColor"/>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="config-item">
                                    <label>显示篇数</label>
                                    <el-input-number v-model="activeComponent.config.num" :min="1" :max="10" size="small"/>
                                </div>
                            </el-col>
                        </el-row>
                    </template>
                    
                </div>
            </template>
        </el-card>
    </div>
    `
};